<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仪表盘 - Web</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { margin: 0; min-height: 100vh; }
    </style>
</head>
<body class="bg-gray-50">
    <div class="flex h-screen">
        <!-- Sidebar -->
        <div class="w-64 bg-white border-r flex flex-col">
            <div class="p-4 border-b">
                <h1 class="text-xl font-bold text-gray-800">问题管理系统</h1>
            </div>
            
            <div class="flex-1 overflow-y-auto p-4">
                <div class="mb-6">
                    <h3 class="text-xs font-semibold text-gray-500 uppercase mb-2">导航</h3>
                    <nav class="space-y-1">
                        <a href="#" class="flex items-center px-3 py-2 text-sm bg-blue-50 text-blue-600 rounded-lg">
                            <i class="fas fa-home w-5"></i>
                            <span class="ml-3">仪表盘</span>
                        </a>
                        <a href="#" class="flex items-center px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
                            <i class="fas fa-list w-5"></i>
                            <span class="ml-3">问题列表</span>
                        </a>
                        <a href="#" class="flex items-center px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
                            <i class="fas fa-columns w-5"></i>
                            <span class="ml-3">看板</span>
                        </a>
                        <a href="#" class="flex items-center px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
                            <i class="fas fa-book w-5"></i>
                            <span class="ml-3">知识库</span>
                        </a>
                    </nav>
                </div>

                <div class="mb-6">
                    <h3 class="text-xs font-semibold text-gray-500 uppercase mb-2">分组</h3>
                    <nav class="space-y-1">
                        <a href="#" class="flex items-center justify-between px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
                            <div class="flex items-center">
                                <i class="fas fa-circle text-blue-500 text-xs w-5"></i>
                                <span class="ml-3">工作</span>
                            </div>
                            <span class="text-xs text-gray-500">18</span>
                        </a>
                        <a href="#" class="flex items-center justify-between px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
                            <div class="flex items-center">
                                <i class="fas fa-circle text-green-500 text-xs w-5"></i>
                                <span class="ml-3">学习</span>
                            </div>
                            <span class="text-xs text-gray-500">12</span>
                        </a>
                        <a href="#" class="flex items-center justify-between px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
                            <div class="flex items-center">
                                <i class="fas fa-circle text-purple-500 text-xs w-5"></i>
                                <span class="ml-3">生活</span>
                            </div>
                            <span class="text-xs text-gray-500">5</span>
                        </a>
                    </nav>
                </div>
            </div>

            <div class="p-4 border-t">
                <div class="flex items-center">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop" 
                         class="w-10 h-10 rounded-full">
                    <div class="ml-3 flex-1">
                        <p class="text-sm font-semibold">张三</p>
                        <p class="text-xs text-gray-500">设置</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="flex-1 overflow-y-auto">
            <!-- Header -->
            <div class="bg-white border-b p-6">
                <div class="flex justify-between items-center">
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800">仪表盘</h2>
                        <p class="text-sm text-gray-600 mt-1">欢迎回来，这是你的工作概览</p>
                    </div>
                    <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
                        <i class="fas fa-plus mr-2"></i>新建问题
                    </button>
                </div>
            </div>

            <div class="p-6">
                <!-- Stats Cards -->
                <div class="grid grid-cols-4 gap-6 mb-6">
                    <div class="bg-white rounded-lg p-6 shadow-sm">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm text-gray-600">逾期</span>
                            <i class="fas fa-exclamation-circle text-red-500"></i>
                        </div>
                        <div class="text-3xl font-bold text-red-500">5</div>
                        <p class="text-xs text-gray-500 mt-2">需要立即处理</p>
                    </div>

                    <div class="bg-white rounded-lg p-6 shadow-sm">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm text-gray-600">今日到期</span>
                            <i class="fas fa-calendar-day text-orange-500"></i>
                        </div>
                        <div class="text-3xl font-bold text-orange-500">12</div>
                        <p class="text-xs text-gray-500 mt-2">今天需要完成</p>
                    </div>

                    <div class="bg-white rounded-lg p-6 shadow-sm">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm text-gray-600">处理中</span>
                            <i class="fas fa-spinner text-blue-500"></i>
                        </div>
                        <div class="text-3xl font-bold text-blue-500">8</div>
                        <p class="text-xs text-gray-500 mt-2">正在进行中</p>
                    </div>

                    <div class="bg-white rounded-lg p-6 shadow-sm">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm text-gray-600">本周完成</span>
                            <i class="fas fa-check-circle text-green-500"></i>
                        </div>
                        <div class="text-3xl font-bold text-green-500">23</div>
                        <p class="text-xs text-gray-500 mt-2">+15% 较上周</p>
                    </div>
                </div>

                <div class="grid grid-cols-3 gap-6">
                    <!-- Today's Tasks -->
                    <div class="col-span-2 bg-white rounded-lg shadow-sm">
                        <div class="p-6 border-b">
                            <h3 class="font-bold text-gray-800">今日任务</h3>
                        </div>
                        <div class="p-6 space-y-4">
                            <div class="flex items-start p-4 border-l-4 border-red-500 bg-red-50 rounded">
                                <div class="flex-1">
                                    <h4 class="font-semibold text-gray-800 mb-1">修复登录页面验证码显示问题</h4>
                                    <p class="text-sm text-gray-600 mb-2">用户反馈验证码图片无法加载</p>
                                    <div class="flex items-center gap-2 text-xs">
                                        <span class="bg-red-100 text-red-600 px-2 py-1 rounded">P0</span>
                                        <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded">工作</span>
                                        <span class="text-gray-500"><i class="far fa-clock mr-1"></i>18:00</span>
                                    </div>
                                </div>
                            </div>

                            <div class="flex items-start p-4 border-l-4 border-orange-500 bg-orange-50 rounded">
                                <div class="flex-1">
                                    <h4 class="font-semibold text-gray-800 mb-1">优化数据库查询性能</h4>
                                    <p class="text-sm text-gray-600 mb-2">用户列表加载速度慢</p>
                                    <div class="flex items-center gap-2 text-xs">
                                        <span class="bg-orange-100 text-orange-600 px-2 py-1 rounded">P1</span>
                                        <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded">工作</span>
                                        <span class="text-gray-500"><i class="far fa-clock mr-1"></i>20:00</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Activity -->
                    <div class="bg-white rounded-lg shadow-sm">
                        <div class="p-6 border-b">
                            <h3 class="font-bold text-gray-800">最近活动</h3>
                        </div>
                        <div class="p-6 space-y-4">
                            <div class="flex">
                                <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-check text-green-500 text-sm"></i>
                                </div>
                                <div class="flex-1">
                                    <p class="text-sm text-gray-700">完成问题 #128</p>
                                    <p class="text-xs text-gray-500">2小时前</p>
                                </div>
                            </div>

                            <div class="flex">
                                <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-plus text-blue-500 text-sm"></i>
                                </div>
                                <div class="flex-1">
                                    <p class="text-sm text-gray-700">新建问题 #129</p>
                                    <p class="text-xs text-gray-500">3小时前</p>
                                </div>
                            </div>

                            <div class="flex">
                                <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-book text-purple-500 text-sm"></i>
                                </div>
                                <div class="flex-1">
                                    <p class="text-sm text-gray-700">创建知识条目</p>
                                    <p class="text-xs text-gray-500">5小时前</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
